<template>
  <div style="min-height: 300px;" v-if="pageReady">
    <table class="mytable">
      <tr>
        <th id="lineTd" style="width: 250px">
          <span style="float:left;margin-top:20px;">product</span>
          <span style="float:right;margin-top:-10px;">produce step</span>
        </th>
        <th v-for="(s,index) in stepList" :key="s.id">
          {{s.stepname}}
        </th>
      </tr>
      <tr v-for="(p,index) in productStepList" :key="p.id">
        <td style="font-weight: 800;">
          {{p.productname}}({{p.productguige}})
        </td>
        <td v-for="(step,sIndex) in p.iraOrderProductStepCountList" :key="step.id">
          <el-input v-model="step.stepCount" οninput="value=value.replace(/^0+(\d)|[^\d]+/g,'')" type="number"></el-input>
        </td>
      </tr>
    </table>
    <div style="text-align: center;margin-top: 10px;">
      <el-button type="primary" @click="onSaveStepCount">save</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  props:{
    entityId : {type : Number, default: 0},
  },
  data() {
    return {
      productStepList:[],
      stepList:[],
      pageReady : false,
    }
  },
  mounted() {
    this.loadProductStep();
  },
  methods: {
    loadProductStep(){
      request({
        url: '/emp/orderproduct/listproductstepcount',
        data: {id : this.entityId}
      }).then(res => {
        const { data } = res
        this.productStepList = data
        if(this.productStepList.length > 0){
          this.stepList = this.productStepList[0].iraOrderProductStepCountList;
        }
        this.pageReady = true
      })
    },
    onSaveStepCount(){
      const stepCountList = [];
      this.productStepList.forEach((ps) =>{
        const pid = ps.id
        ps.iraOrderProductStepCountList.forEach((sc)=>{
          const stepCountObj = {};
          stepCountObj.pid = pid;
          stepCountObj.sid = sc.id
          stepCountObj.orderid = this.entityId
          stepCountObj.stepCount = sc.stepCount || 0
          stepCountList.push(stepCountObj)
        })
      })
      request({
        url: '/emp/orderproduct/saveproductstepcount',
        data: {stepCountList : stepCountList}
      }).then((res)=>{
        if(res.code === "200"){
          this.$message.success(res.msg)
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
#lineTd{
  background:#FFFFFF url() no-repeat 100% center;
}

</style>
